<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>表格</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }
        body {
            font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
            overflow: auto;
            font-weight: 400;
            -webkit-font-smoothing: antialiased;
        }
        .tb-edit .el-input {
            display: none
        }
        .tb-edit .current-row .el-input {
            display: block
        }
        .tb-edit .current-row .el-input+span {
            display: none
        }
    </style>
</head>

<body>
<div id="app">
    <el-table
        :data="tableData"
        border
        style="width: 100%"
        @selection-change="handleSelectionChanges"
    >
        <!--设置复选框-->

        <!--设置序号-->
        <el-table-column
            type="index"
            width="50">
        </el-table-column>
        <el-table-column
            fixed
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column  prop="date" label="日期" width="150">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column
            prop="province"
            label="省份"
            width="120">
        </el-table-column>
        <el-table-column
            prop="city"
            label="市区"
            width="120">
        </el-table-column>
        <el-table-column
            prop="address"
            label="地址"
            width="300">
        </el-table-column>
        <el-table-column
            prop="zip"
            label="邮编"
            width="120">
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="150">
            <template scope="scope">
                <el-button
                    size="small"
                    @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
                <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, tableData)">删除</el-button>
                <!--//在表格中scope.$index表示行数    一行的内容scope.row-->
            </template>
        </el-table-column>
    </el-table>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data() {
            return {
                tableData: [
                    {
                        date: '2016-05-02',
                        name: '王小虎',
                        province: '上海',
                        city: '普陀区',
                        address: '上海市普陀区金沙江路 1518 弄',
                        zip: 200333
                    }, {
                        date: '2016-05-04',
                        name: '王大鹏',
                        province: '上海',
                        city: '普陀区',
                        address: '上海市普陀区金沙江路 1517 弄',
                        zip: 200333
                    }, {
                        date: '2016-05-01',
                        name: '你晓玲',
                        province: '上海',
                        city: '普陀区',
                        address: '上海市普陀区金沙江路 1519 弄',
                        zip: 200333
                    }, {
                        date: '2016-05-03',
                        name: '王小虎',
                        province: '上海',
                        city: '普陀区',
                        address: '上海市普陀区金沙江路 1516 弄',
                        zip: 200333
                    },
                    {
                        date: '2016-05-01',
                        name: '王小虎',
                        province: '上海',
                        city: '普陀区',
                        address: '上海市普陀区金沙江路 1519 弄',
                        zip: 200333
                    }],


                currentRow: [] , //选中的值
                editFormVisible: false,   //设置默认弹出框  为false
                editForm: {
                    id: 0,
                    date:'',
                    name: '',
                    province: 0,
                    city: '',
                    address: '',
                    zip:''
                },

            }
        },

//方法
        methods:{

            handleSelectionChanges:function(val){  //点击选中
                this.currentRow = val;
                console.log("选中的值--",val)
            },

            //点击编辑
            handleEdit:function (index, row) {
                this.editFormVisible = true;
                this.editForm = Object.assign({}, row);   //重点
                console.log(this.editForm)
            },
            //删除：
            handleDelete(index, row) {
                console.log(index, row);
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        // delete:row.splice(index, 1),
                        type: 'success',
                        message: '删除成功!',
                        delete: row.splice(index, 1)   //splice 删除对象是数unfuntion组   如果是对象会出现错误  row.solice not is

                        // url: this.$router.push('/')
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        }
    })
</script>
</html>
